<template>
  <div>
    <el-form
      :inline="true"
      :model="userViewData.userQueryParam"
      class="search-form"
    >
      <el-form-item label="姓名">
        <el-input
          v-model="userViewData.userQueryParam.userName"
          @blur="onSearchUser"
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input
          v-model="userViewData.userQueryParam.phoneNumber"
          @blur="onSearchUser"
          placeholder="请输入手机号"
        />
      </el-form-item>

      <el-form-item label="角色">
        <el-select
          v-model="userViewData.userQueryParam.roleId"
          @change="onSearchUser"
        >
          <el-option :key="0" label="全部" :value="0" />
          <el-option
            v-for="role in userViewData.roles"
            :key="role.roleId"
            :label="role.roleName"
            :value="role.roleId"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :icon="Search" @click="onSearchUser()">
          查询
        </el-button>
        <el-button type="primary" :icon="CirclePlus" @click="addUser()">
          添加
        </el-button>
      </el-form-item>
    </el-form>

    <el-table :data="userViewData.userList" border style="width: 100%">
      <el-table-column prop="userId" label="用户id" align="center" />
      <el-table-column prop="userName" label="姓名" align="center" />
      <el-table-column prop="phoneNumber" label="手机号" align="center" />
      <el-table-column prop="email" label="邮箱" align="center" />
      <el-table-column prop="roles" label="用户角色" align="center">
        <template #default="scope">
          <el-tag
            class="ml-2"
            style="margin: 0 2px"
            :type="item.roleId == 1 ? '' : 'success'"
            :key="item.roleId"
            v-for="item in scope.row.roles"
          >
            {{ item.roleId == 1 ? "管理员" : "普通用户" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="role" label="操作" width="100" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleEditUser(scope.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt-4 pagination"
      background
      layout="prev, pager, next"
      @current-change="currentChange"
      :page-size="userViewData.userQueryParam.size"
      :total="userViewData.userQueryParam.total"
    />
  </div>

  <!-- 编辑用户的弹出窗-->
  <el-dialog
    v-model="userViewData.editShow"
    :title="userViewData.title"
    width="500px"
  >
    <el-form ref="form" :model="userViewData.editUser" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="userViewData.editUser.userName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input
          v-model="userViewData.editUser.phoneNumber"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="userViewData.editUser.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select
          style="width: 100%"
          multiple
          v-model="userViewData.editUser.roleIds"
          placeholder="请选择角色"
        >
          <el-option
            v-for="role in userViewData.roles"
            :key="role.roleId"
            :label="role.roleName"
            :value="role.roleId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="userViewData.editShow = false">取消</el-button>
        <el-button type="primary" @click="ensureEditUser">修改</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Search, CirclePlus } from "@element-plus/icons-vue";
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { add, page, update } from "@/api/user";
import { listAll } from "@/api/role";
import { User, UserViewData, UserQueryParam } from "@/type/user";
import { ElMessage } from "element-plus";

const userViewData = reactive(new UserViewData());
onMounted(() => {
  // 获取全部用户数据
  console.log("userViewData", userViewData.userQueryParam);
  pageUser(userViewData.userQueryParam);
  // 获取全部角色数据
  getRoleList();
});

// 上一页 || 下一页
const currentChange = (page: number) => {
  userViewData.userQueryParam.current = page;
  pageUser(userViewData.userQueryParam);
};

// 编辑按钮
const handleEditUser = (row: User) => {
  userViewData.title = "修改";
  userViewData.addOrEdit = 2;
  Object.assign(userViewData.editUser, row);
  userViewData.editUser.roleIds = [];
  row.roles.forEach(element => {
    userViewData.editUser.roleIds.push(element.roleId);
  });
  console.log(userViewData.editUser);
  userViewData.editShow = true;
};

// 修改按钮
const ensureEditUser = () => {
  console.log(userViewData.editUser);
  if (userViewData.addOrEdit == 1) {
    add(userViewData.editUser)
      .then(
        res => {
          ElMessage("添加成功！");
          userViewData.editShow = false;
        },
        err => {
          ElMessage("添加失败，请重试！");
        }
      )
      .catch(e => {
        ElMessage("添加失败，请重试！");
      });
  } else {
    update(userViewData.editUser)
      .then(
        res => {
          ElMessage("更新成功！");
          userViewData.editShow = false;
          pageUser(userViewData.userQueryParam);
        },
        err => {
          ElMessage("更新失败，请重试！");
        }
      )
      .catch(e => {
        ElMessage("更新失败，请重试！");
      });
  }
};

// 获取全部用户数据, 因为多个地方使用,所以封装为方法
const pageUser = (userQueryParam: UserQueryParam) => {
  page(userQueryParam).then(res => {
    userViewData.userList = res.data.records;
    userViewData.userQueryParam.total = Number(res.data.total);
    console.log(userViewData.userQueryParam.total);
  });
};

// 获取全部角色数据, 因为多个地方使用,所以封装为方法
const getRoleList = () => {
  listAll().then(res => {
    userViewData.roles = res.data;
    console.log("🚀 ~ res.data", res.data);
  });
};

// 查询用户按钮
const onSearchUser = () => {
  userViewData.userQueryParam.current = 0;
  pageUser(userViewData.userQueryParam);
};

// 新增按钮
const addUser = () => {
  userViewData.addOrEdit = 1;
  userViewData.title = "添加";
  let user: User = new User();
  userViewData.editUser = user;
  userViewData.editShow = true;
};
</script>

<style scoped>
.search-form {
  padding: 10px 0 0 10px;
}
</style>
